<template>
  <ExamMain @change="changeCategory">
    <div class="paper-wrapper">
      <div class="paper-list">
        <div class="item" v-for="item in paperList" :key="item.id">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="info">
              <span>{{ `题数：${item.total_count}题` }}</span>
              <span
                >开放时间：
                <template v-if="item.start_time > 0">
                  {{ item.start_time | parseTime('{y}-{m}-{d} {h}:{i}') }}～{{
                    item.end_time | parseTime('{y}-{m}-{d} {h}:{i}')
                  }}
                </template>
                <template v-else>永久开放</template>
              </span>
            </div>
          </div>
          <div class="right">
            <template v-if="item.has_bought == 0">
              <div class="price" v-if="item.user_price > 0">
                {{ item.user_price | formatMoney }}
              </div>
              <div class="free" v-else>免费</div>
            </template>
            <template v-else>
              <div class="price">已购买</div>
            </template>
            <template v-if="item.user_price > 0 && item.has_bought == 0">
              <el-button
                type="primary"
                size="medium"
                round
                @click="handleUserBuy(item.id, item.paper_id)"
                >购买</el-button
              >
            </template>
            <template v-else>
              <el-button
                type="primary"
                size="medium"
                round
                v-if="item.exam_status === 1"
                @click="clickAnswer(item.paper_id, item.exam_rest_num, item.face_verification)"
                >开始答题</el-button
              >
              <el-button type="primary" size="medium" round disabled v-else>暂未开放</el-button>
            </template>
          </div>
        </div>
      </div>
      <div class="paper-no-data" v-if="!loading && paperList.length == 0">
        <EduNoData></EduNoData>
      </div>
      <EduPagination @handleCurrentChange="handleCurrentChange"></EduPagination>
      <!-- 人脸验证 -->
      <EduFaceVerify
        v-if="faceVisible"
        :visible.sync="faceVisible"
        scene_key="exam"
        :scene_id="scene_id"
        scene_type="1"
        @cancel="handleFace"
      ></EduFaceVerify>
    </div>
  </ExamMain>
</template>

<script>
import EduPagination from '@/components/EduPagination'
import EduNoData from '@/components/EduNoData'
import EduFaceVerify from '@/components/EduFaceVerify'
import ExamMain from '../components/examMain'
import { mapGetters } from 'vuex'
export default {
  components: {
    EduPagination,
    EduNoData,
    EduFaceVerify,
    ExamMain
  },
  data() {
    return {
      category: 0,
      paperList: [],
      faceVisible: false,
      scene_id: 0,
      moduleId: 0,
      loading: true
    }
  },
  computed: {
    ...mapGetters({
      faceStatus: 'projectSetting/getGlobFaceStatus'
    })
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.moduleId = n.query.id
        this.category = n.query.category
        this.getpaperList()
      }
    }
  },
  created() {
    // this.getpaperList()
  },
  methods: {
    // 获取列表数据
    getpaperList() {
      if (!this.moduleId || !this.category) return
      this.$api.getExamPaperList(
        {
          module_id: this.moduleId,
          category: this.category,
          page: this.$store.getters['paginate/page'],
          count: 10
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 触发分类事件
    changeCategory(data) {
      this.category = data.cid
      this.moduleId = data.mid
      this.getpaperList()
    },
    // 分页
    handleCurrentChange() {
      this.getpaperList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.paperList = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 10,
        total: data.total
      })
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    // 开始答题按钮
    clickAnswer(id, num, face) {
      this.$globalToLogin(() => {
        if (num === 0) {
          this.$message.info('考试次数已用完')
        } else {
          if (face == 1) {
            this.faceEntrance()
            this.scene_id = id
          } else {
            this.jump(id)
          }
        }
      })
    },
    // 窗口
    faceEntrance() {
      // 已认证
      if (this.faceStatus) {
        this.$messageBox
          .confirm('请进行人脸验证', {
            type: 'none',
            center: true,
            confirmButtonText: '去验证'
          })
          .then(() => {
            this.faceVisible = true
          })
          .catch(() => {})
      } else {
        this.$messageBox
          .confirm('未完成人脸认证，请先去认证', {
            type: 'none',
            center: true,
            confirmButtonText: '去认证'
          })
          .then(() => {
            this.$router.push({
              path: '/my/profile/face_verify',
              query: {
                back: 1
              }
            })
          })
          .catch(() => {})
      }
    },
    handleFace() {
      this.jump(this.scene_id)
    },
    jump(id) {
      this.$router.push({
        path: '/exam/paper/topic',
        query: {
          id: id
        }
      })
    },
    // 购买
    handleUserBuy(id, paper_id) {
      this.$globalToLogin(() => {
        this.$router.push({
          path: '/buy/exam',
          query: {
            id: id,
            paperId: paper_id,
            type: 'paper'
          }
        })
      })
    }
  },
  beforeDestroy() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.paper-wrapper {
  margin-top: 10px;
  .paper-list {
    .item {
      margin-top: 10px;
      padding: 25px 30px;
      display: flex;
      background-color: #ffffff;
      .left {
        flex: 1;
        .title {
          font-size: 15px;
          font-weight: 500;
          color: $text-color-import;
        }
        .info {
          margin-top: 12px;
          font-size: 13px;
          font-weight: 400;
          color: $text-color-auxiliary;
          span + span {
            margin-left: 56px;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        .price,
        .free {
          font-size: 14px;
          font-weight: 500;
          margin-right: 42px;
        }
        .price {
          color: $text-color-price;
        }
        .free {
          color: $text-color-free;
        }
        .el-button {
          width: 94px;
        }
      }
    }
  }
  .paper-no-data {
    padding: 50px 0;
    background-color: #ffffff;
  }
}
</style>
